<template>
  <el-scrollbar height="100vh" width="3px">
  <el-aside :width="width" class="p-0 m-0">
    <el-menu
        class="elmenu bg-gray-600 text-light-200 elMenu"
        :collapse="isCollapse"
        style="overflow-y: auto;"
    >
      <div class="flex justify-center  h-14 text-xl header text-blue-500 font-bold"><span @click="getQRX">医院管理系统</span></div>
        <template v-for="(item, index) in list" :key="index">
          <el-menu-item
            v-if="item.children.length === 0"
            :index="item.path"
            :key="index"
            class="elmenuitem text-left"
          >
            <router-link :to="item.path" class="flex justify-center items-center">
              <component class="icons" :is="item.icon"></component>
              <span>{{ item.name }}</span>
            </router-link>
            <!-- <div class="flex justify-center items-center" @click="handleClick(item.path)">
              <component class="icons" :is="item.icon"></component>
              <span>{{ item.name }}</span>
            </div> -->
          </el-menu-item>

          <el-sub-menu
            v-else
            :index="item.path"
            :key="item.path"
            class="text-cyan-400"
          >
            <template #title>
              <component class="icons" :is="item.icon"></component>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group class="bg-gray-500">
              <el-menu-item
                v-for="subItem in item.children"
                :index="subItem.path"
                :key="subItem.path"
              >
                <router-link :to="subItem.path"  class="flex justify-center items-center">
                  <component class="icons"  :is="subItem.icon"></component>
                  <span>{{ subItem.name }}</span>
                </router-link>
            </el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
      </template>
    </el-menu>
  </el-aside>
  </el-scrollbar>
  <el-dialog  v-model="A" title="了解更多信息" width="40%">
    <el-image :src="src"></el-image>
  </el-dialog>
  
</template>

<script setup name="CommonAside">
import { ref, computed, reactive } from "vue";
import { useAllDateStore } from "@/stores";
import { userDateStore } from "@/stores/user";
import { getRouters } from "@/api/sys/login"
import { useRouter } from "vue-router";
import {useCookies} from '@vueuse/integrations/useCookies';
import { getQR } from '@/api/sys/qr.js'
const cookies = useCookies()
const router = useRouter();
var list = reactive([]);
let src = ref('')
let A = ref(false)
let i = 0
//   { label: "患者首页", icon: "user", path: "/patient" },
//   { label: "预约挂号", icon: "money", path: "/appointment" },
//   {
//       label: "住院管理",
//       path: '/inhospital',
//       name: "inhospital",
//       icon: "user",
//       children: [{
//         // 住院患者
//         label: "住院患者",
//         path: '/inhospitalPatientList',
//         icon: "user",
//         name: "inhospitalPatientList",
//       },{
//         // 住院房间
//         label: "住院房间",
//         path: '/inhospitalRoomList',
//         icon: "user",
//         name: "inhospitalRoomList",
//       }]
//     },
//   { label: "就诊管理", icon: "goods", path: "/visit" },
//   { label: "基础信息", icon: "goods", path: "/basicInformation",children:[
//     { label: "科室管理", icon: "goods", path: "/department" },
//     { label: "医生管理", icon: "goods", path: "/basicInformation/doctor" },
//     { label: "患者管理", icon: "goods", path: "/basicInformation/patient" },
//     { label: "药品管理", icon: "goods", path: "/drug" },
//     { label: "检查项目", icon: "goods", path: "/checkProject" },
//   ] },
//   {
//     label: "系统设置",
//     icon: "setting",
//     path: "/setting",
//     children: [
//       { label: "角色管理", icon: "goods", path: "/role" },
//       { label: "权限管理", icon: "flag", path: "/permission" },
//       { label: "用户管理", icon: "user", path: "/user" },
//     ],
//   },
// ]);

const store = useAllDateStore()
const isCollapse = computed(()=> store.state.isCollapse)
//  width
const width  = computed(()=>store.state.isCollapse?'70px':'180px')
const storeUser = userDateStore()
// 获取路由
function getRouter(){
  getRouters(cookies.get("type")).then(res => {
    // console.log(cookies.get("type"))
    if(res.status == 'fail'){
      router.push('/login')
      return;
    }
    if(res.code == 200){
      storeUser.mutations.setRouter(res.routers)
      storeUser.mutations.setUser(res.data)
      list = storeUser.getters.getRouter
      isCollapse.value = true
      // console.log(list)
    }
  }).catch(err => {
      console.log(err)
  })
}
// 获取路由
getRouter();

function getQRX(){
  const x = 'https://www.baidu.com/'
  getQR(x).then(res =>{
    console.log(res)
    src.value = "http://localhost:8848/QR/" + res.name
    i++;
    if(i % 2 == 0){
      A.value = false
    }else{
      A.value = true
    }
  })
}
</script>

<style scoped>
.icons {
  width: 50px;
  height: 18px;
  margin-right: 5px;
}
.elmenu {
  height: 100vh;
  width: 180px;
}
.header{
    line-height: 56px;
}
.elMenu::-webkit-scrollbar { 
  display: none;
}
</style>